<!--经纪人奖励管理-详情-->
<template>
  <div class="detail">
    <div class="order">
        <span><b>批次号: </b>{{info.code}}</span>
    </div>
    <div class="textTitle">基本信息：</div>
    <table>
      <tr>
        <td>姓名：</td>
        <td>{{info.idCardName}}</td>
        <td>手机号：</td>
        <td>{{brokerPhone}}</td>
      </tr>
      <tr>
        <td>身份证：</td>
        <td>{{info.idCard}}</td>
        <td>角色：</td>
        <td>{{role}}</td>
      </tr>
      <tr>
        <td>所属公司：</td>
        <td>{{info.companyName}}</td>
        <td>申请奖励金额：</td>
        <td>{{applyAmount}}</td>
      </tr>
      <tr v-if="info.type === 2">
        <td>银行卡号：</td>
        <td>{{info.bankCard}}</td>
        <td>开户行：</td>
        <td>{{info.bankBranchName}}</td>
      </tr>
      <tr>
        <td>申请人：</td>
        <td>{{info.applyUser}}</td>
        <td>申请渠道：</td>
        <td>{{applySource}}</td>
      </tr>
      <tr>
        <td>申请时间：</td>
        <td>{{createTime}}</td>
        <td>用途：</td>
        <td>经纪人奖励</td>
      </tr>
    </table>
    <div class="textTitle">订单信息：</div>
    <div class="textSub">
      <span v-if="info.type === 2"><b>应付金额合计：</b> {{totalAmount()}}</span>
      <span v-else><b>应结购物卡合计：</b> {{totalAmount()}}</span>
      <span><b>订单数量：</b> {{awardInfoList.length}}</span>
    </div>
    <el-table :data="awardInfoList" border>
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="orderId" label="订单号">
        <template slot-scope="scope">
            <el-button  @click="handleClick(scope.row)" type="text" size="small">{{scope.row.orderId}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="customerName" label="客户姓名"></el-table-column>
      <el-table-column align="center" :formatter="customerPhone" label="手机号"></el-table-column>
      <el-table-column align="center" prop="devName" label="楼盘"></el-table-column>
      <el-table-column align="center" prop="houseNum" label="房间号"></el-table-column>
      <el-table-column align="center" prop="nodeName" label="结佣类别"></el-table-column>
      <el-table-column align="center" :formatter="nodeAmount"  label="奖励金额（元）"></el-table-column>
      <el-table-column align="center"  label="奖励方式">
        <template slot-scope="scope">
          <span v-if="scope.row.awardType === 1">购物卡</span>
          <span v-else>现金</span>
        </template>
      </el-table-column>
      <el-table-column v-if="info.type === 2" align="center" :formatter="taxRate" label="税率"></el-table-column>
      <el-table-column v-if="info.type === 2" align="center" :formatter="shouldSubTax" label="应扣税费（元）"></el-table-column>
      <el-table-column v-if="info.type === 2" align="center" :formatter="shouldPayAmount" label="应付现金（元）"></el-table-column>
      <el-table-column v-else align="center" :formatter="shouldPayAmount" label="应付购物卡（元）"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import utils from '../../common/utils';
export default {
  name: 'detail',
  props: {
    awardInfoList: Array,
    info: Object,
    brokerType: String,
    brokerPhone: String,
    cash: Number
  },
  data() {
    return {
      money: 0
    }
  },
  computed: {
    // 申请奖励金额
    applyAmount() {
      return `￥${utils.formatMoney(this.info.applyAmount)}`
    },
    // 申请渠道
    applySource() {
      if(this.info.applySource == 0) {
        return '经纪人端'
      } else {
        return '运营后台'
      }
    },
    createTime() {
      return utils.getTimeString(this.info.createTime)
    },
    role() {
      let roles = this.brokerType;
      if(roles == 0) {
        return '网络推客'
      }else if(roles == 1) {
        return '兼职经纪人'
      }else if(roles == 2) {
        return '案场销售'
      }else if(roles == 3) {
        return '职业经纪人'
      }else if(roles == 4) {
        return '经纪门店'
      }else if(roles == 5) {
        return '经纪公司'
      }else if(roles == 6) {
        return '置业顾问'
      }else if(roles == 7) {
        return '开发商'
      }else if(roles == 8) {
        return '销售经理'
      }
    }
  },
  methods: {
    handleClick(row){
      this.$router.push({path:'./detailorder',query:{orderId:row.orderId}})
    },
    // 手机号格式化
    customerPhone(row) {
      return utils.formatPhoneNumber(row.customerPhone)
    },
    // 奖励金额格式化
    nodeAmount(row) {
      return utils.formatMoney(row.nodeAmount)
    },
    shouldSubTax(row) {
      return utils.formatMoney(row.shouldSubTax)
    },
    shouldPayAmount(row) {
      return utils.formatMoney(row.shouldPayAmount)
    },
    taxRate(row) {
      if(row.taxRate === null) {
        return ''
      }
      return `${row.taxRate.toFixed(2)}%`
    },
    // 金额合计
    totalAmount() {
      let money = 0;
      money = this.awardInfoList.reduce((a,b) => {
        return a + b.nodeAmount
      },0)
      return `￥${money}元`;
    },
  }
}
</script>
<style lang="stylus" scoped>
  .detail
    .order
      float right 
    .textTitle
      line-height 40px
      font-weight bold
      margin 15px 0
    .textSub
      margin-bottom 15px
      font-size 14px
    table 
      border-collapse collapse
      width 100%
    table tr td 
      border 1px solid #ccc
      box-sizing border-box
      padding 0 3px
      line-height 30px
      text-align center 
      width 25%
    table tr td:nth-child(odd) 
      text-align right
</style>

